<!doctype html>
<html lang="en">
<head>
	<title>Overview</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="%description%" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/raphael-min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijpiechart.js" type="text/javascript"></script>
	<style type="text/css">
		#wijpiechart
		{
			width: 756px;
			height: 475px;
		}
	</style>
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			$("#wijpiechart").wijpiechart({
				radius: 140,
				legend: { visible: true },
				hint: {
					content: function () {
						return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
						}
				},
				header: {
					text: "Steam - Mac Hardware"
				},
				seriesList: [{
					label: "MacBook Pro",
					legendEntry: true,
					data: 46.78,
					offset: 15
				}, {
					label: "iMac",
					legendEntry: true,
					data: 23.18,
					offset: 0
				}, {
					label: "MacBook",
					legendEntry: true,
					data: 20.25,
					offset: 0
				}, {
					label: "Mac Pro",
					legendEntry: true,
					data: 5.41,
					offset: 0
				}, {
					label: "Mac mini",
					legendEntry: true,
					data: 3.44,
					offset: 0
				}],
				seriesStyles: [{
					fill: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(175,229,0)", "stroke-width": 1.5
				}, {
					fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(127,199,60)", "stroke-width": 1.5
				}, {
					fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(95,153,150)", "stroke-width": 1.5
				}, {
					fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(62,95,119)", "stroke-width": 1.5
				}, {
					fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(149,149,149)", "stroke-width": 1.5
				}]
			});
		});
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Overview</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="wijpiechart" class="ui-widget ui-widget-content ui-corner-all">
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">

<p>The wijpiechart widget allows you to create customized pie charts. The samples in this section highlight some of the unique features of the widget, and they will help you get started with the wijpiechart widget.</p>

<p>The source in this sample will show you how to add a header to the chart; how to add label text to the legend; how to populate the chart with data; and how to style the pie pieces.</p>


		</div>
	</div>
</body>
</html>
